<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="item in tabs" :key="item.path" :to="{ path: item.path }">

            {{ item.meta.title }}

        </el-breadcrumb-item>


        <div class="rightUser">
            <el-icon><User /> </el-icon> {{ store.state.HomeModules.userId }}
            
            <el-button type="info" size="small" @click="idLogout()">安全退出</el-button>
        </div>
    </el-breadcrumb>


</template>

<script lang="ts" setup>
import {
    User    
} from '@element-plus/icons-vue';
// 导入vue
import { onMounted, Ref, ref, watch } from 'vue'
// 定义useRoute模块
import { RouteLocationMatched, useRoute, useRouter } from "vue-router"
import { useStore } from 'vuex';
// 对话框
import { ElMessage, ElMessageBox } from 'element-plus'
// 定义一个面包屑集合
const tabs: Ref<RouteLocationMatched[]> = ref([])
const store = useStore();
//获取当前路由的信息
const route = useRoute();
const router = useRouter();


console.log('面包屑', route.matched);
// 定义一个函数getBreCum
const getBredCum = () => {
    // 过滤路由匹配的信息 -->route.matched 需要有meta.title 
    let matched = route.matched.filter((item) => item.meta && item.meta.title);
    // 获取matched第一条
    const first = matched[0]
    // 判断是不是首页
    if (first && first.path !== '/index') {
        matched = [{ path: '/index', meta: { 'title': '首页' } } as any].concat(matched)
    }
    // 拼接好的值给tabs
    tabs.value = matched
}

// 当请求的url的path变化,自动调用getBredCum
watch(() => route.path, () => getBredCum())

onMounted(() => {
    getBredCum()
})

// 退出
const idLogout = () => {
    // 饿了么UI的对话框，弹出层！
    ElMessageBox.confirm(
        '管理员，您确认要退出吗？',
        'iBox后台管理',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '退出成功！即刻前往登录页~',
            }) 
            // 跳转到登录页
            router.push("/login");
            // 发送删除本地cookie的请求
            store.commit("userLogout")                    
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消！',
            })
        })






}
</script>


<style scoped>
.rightUser {
    position: fixed;
    right: 90px;
    /* font: 500 18px/20px ''; */

}
.el-icon {
    margin: 2px 0 0 0;
}
</style>
